<style lang="less" scoped src="./balance.less"></style>
<style lang="less" scoped src="../public.less"></style>
<script src="./balance.js"></script>

<template>
    <div>
        <div>
            <Row class="query">
                <Col span="24">
                    学生姓名：<Input v-model="queryData.studentName" style="width:  150px"></Input>
                创建时间：
                    <DatePicker type="datetime" style="width: 200px" v-model="queryData.startTime"></DatePicker>
                    --
                    <DatePicker type="datetime" style="width: 200px" v-model="queryData.endTime"></DatePicker>
                <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
                </Col>
            </Row>

            <Row class="query">
                <Col span="24">
                <span @click="showAdd"><Button type="primary" icon="plus">新增</Button></span>
                </Col>
            </Row>
        </div>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList" :highlight-row="true"></Table>
        </div>
        <div style="margin-top: 10px;display: flex">
            <h3 style="margin-left: 5px">收入：<span style="color:red;">{{totalAmt}}元</span></h3>
            <h3 style="margin-left: 5px">支出：<span style="color:red;">{{totalCost}}元</span></h3>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal
                title="充值"
                v-model="addOrEditVisible"
                width="500px"
                :closable="true"
                :transfer="false"
                :mask-closable="false"
        >
            <div>
                <Form :label-width="150" :model="formData" :rules="formDataRules" ref="formData">
                    <FormItem label="学生姓名" prop="studentName">
                        <Input v-model="formData.studentName" style="width:180px" @on-blur="queryByName"></Input>
                        <span @click="studentModal = true"><Button type="primary" size="small"
                                                                   icon="android-search"></Button></span>
                    </FormItem>
                    <FormItem label="充值金额(元)" prop="amt">
                        <!--<Input v-model="formData.amt" ></Input>-->
                        <InputNumber v-model="formData.amt" style="width:200px"></InputNumber>
                    </FormItem>
                    <FormItem label="赠送金额(元)" prop="giveAmt">
                        <InputNumber v-model="formData.giveAmt" style="width:200px"></InputNumber>
                    </FormItem>
                    <!--<FormItem label="充值/支出">-->
                    <!--<Select v-model="formData.type" style="width: 200px" >-->
                    <!--<Option value="PLUS">充值</Option>-->
                    <!--<Option value="MINUS">支出</Option>-->
                    <!--</Select>-->
                    <!--</FormItem>-->
                    <FormItem label="支付类型" prop="payType">
                        <Select v-model="formData.payType" style="width: 200px">
                            <Option value="CASH">现金</Option>
                            <Option value="WECHAT">微信</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" @click="doSave('formData')">确认</Button>
                <Button type="ghost" style="margin-left: 8px" @click="addOrEditVisible = false">取消</Button>
            </div>
        </Modal>
        <Modal v-model="studentModal"
               title="学员列表"
               width="80%"
               :styles="{top: '20px'}"
               :mask-closable="false"
               @on-ok="setStudent"
               @on-cancel="studentModal = false">
            <div class="table-content">
                <student-list ref="student"></student-list>
            </div>
        </Modal>

        <Modal v-model="payNumVisible"
               title="支付中心条码支付"
               width="300px"
               :transfer="false"
               :mask-closable="false"
               ok-text="支付"
               @on-ok="payByWechat"
        >
            <div style="text-align: center">
                <h3>使用扫码枪扫描用户出示的支付条码</h3>
                <h3 style="color: red;">注意：扫码前请确保光标在输入框内</h3>
                <Input v-model="payNum" clearable style="width: 200px;margin-top: 20px;"></Input>
            </div>
        </Modal>

    </div>
</template>
